<template>
    <div class="photoinfo">
        <myheader title="图片详情"></myheader>
        <div class="info-wrap">
            <h4>{{photoinfo.title}}</h4>
            <p class="subtitle">
                <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
                <span>点击：{{photoinfo.click}}次</span>

            </p>
            <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
            <p class="content" v-html="photoinfo.content"></p>
            <comment :id="id"></comment>
        </div>
    </div>
</template>

<script>
    import myheader from '../../components/header'
    import comment from '../../components/comment'
    import {Toast} from 'mint-ui'
    export default {
        name: "photoinfo",
        props:['id'], //动态路由传递进来的参数
        components:{
            myheader,
            comment
        },
        data(){
            return {
                photoinfo:{},
                slide1:[]
            }
        },
        methods:{
            getPhotoinfo(){ //获取图片详情数据，根据id
                this.$http.get('api/getimageInfo/'+this.id).then(res=>{
                    // console.log(res);
                    this.photoinfo = res.body.message[0]
                },err=>{
                    Toast('获取图片详情数据失败')
                })
            },
            getThumimages(){
                this.$http.get('api/getthumimages/'+this.id).then(res=>{

                    res.body.message.forEach((item,index,arr)=>{//改造我们的数据
                        //item : 代表你遍历的这个数组的每一项 ，index:就是每一项的索引 ，arr：代表你遍历的这个数组
                        item.w = 600;
                        item.h = 600;
                        item.msrc = item.src
                        item.title = 'photothum'+(index+1)
                    })
                    this.slide1 = res.body.message //改造完成后赋值
                    console.log(res.body.message);
                },err=>{
                    Toast('获取缩略图数据失败')
                })
            },
            handleClose(){

            }
        },
        created(){
            this.getPhotoinfo();
            this. getThumimages()
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/sassstyle";
.info-wrap{
   padding: 0 4px 55px;
    h4{
        margin: 15px 0;
        text-align: center;
        font-size: 15px;
        color: $theme-color;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
    }
    .content{
        color: #333333;
        text-indent:24px;
        line-height: 25px;
    }
}
</style>
